import { defineStore } from 'pinia'
// 本地存储token的工具函数
import { getToken, removeToken, setToken } from '../utils/token-utils'
// pinia仓库的数据模型
import type { UserInfoState } from './interface'
import { ElMessage } from 'element-plus'
import { staticRoutes } from '@/router/routes'
import { getUserInfoApi, loginApi, logoutApi } from '@/api/acl/user'

/**
 * 用户信息
 * @methods setUserInfos 设置用户信息
 */
export const useUserInfoStore = defineStore('userInfo', {
  state: (): UserInfoState => ({
    token: getToken() as string, // token
    name: '', // 名称
    avatar: '', // 头像
    menuRoutes: [], // 菜单路由相关(后期需要明确，暂时不清楚作用)
  }),

  actions: {
    // 要修改Login的action函数

    // @ login用户登录与getInfo获取用户信息是分开来的
    // @ login的登录仅仅为了获取token
    // @ 有了token才能说明你已经登录成功，才有资格去获取用户信息

    // # 1.登录是在views/login/index.vue的登录按钮点击回调中使用
    async login(username: string, password: string) {
      const { token } = await loginApi(username, password)
      this.token = token // 这行代码只是进行的是state的设置，没有进行localStorage的设置
      setToken(token) // localStorage的存储token操作
    },

    // # 2.获取用户信息是在/permission.ts授权路由守卫中使用
    async getInfo() {
      const info = await getUserInfoApi()
      this.name = info.name
      this.avatar = info.avatar
      // @目前菜单路由就等同于静态路由
      this.menuRoutes = staticRoutes // menuRoutes我们目前暂时不知道它是干嘛的，所以直接将原来的代码进行保留
    },
    // # 3.是在layout/components/Navbar.vue中的退出按钮点击回调中使用
    async reset() {
      if (this.name) {
        await logoutApi()
      }
      // 删除local中保存的token
      removeToken()
      // 提交重置用户信息的mutation
      this.token = ''
      this.name = ''
      this.avatar = ''
    },
  },
})
